<template>
  <div class="flex gap-x-4 mt-2">
    <div
      class="lg:w-300 ease-in-out transition duration-150 bg-white border border-gray-100 w-0 h-full rounded-lg hover:shadow-lg"
    >
      <div class="flex flex-col">
        <div class="w-30 h-30 mx-auto p-2">
          <img src="https://api.multiavatar.com/378ef58854dce0b8df.png" alt="avatar" />
        </div>
        <div class="border-b-1 border-b-gray-50"></div>
        <div class="p-5 text-lg">这里是一些介绍</div>
      </div>
    </div>

    <div class="flex-auto">
      <Card />

      <Card />

      <Card />

      <div class="flex justify-end gap-2">
        <div class="w-9 h-9 bg-white text-gray-600 rounded shadow flex-center cursor-pointer">
          &LeftAngleBracket;&LeftAngleBracket;
        </div>

        <div class="w-9 h-9 bg-white text-gray-600 rounded shadow flex-center cursor-pointer">
          1
        </div>
        <div class="w-9 h-9 bg-white text-gray-600 rounded shadow flex-center cursor-pointer">
          2
        </div>

        <div class="w-9 h-9 bg-white text-gray-600 rounded shadow flex-center cursor-pointer hover:animated animate-infinite animate-slide-in-right animated-faster">
          &RightAngleBracket;&RightAngleBracket;
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Card from '@/components/Card.vue'
</script>
